/*
 * 店铺列表
 * @Author: ljb
 * @Date: 2018-04-20 17:38:08
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-23 18:06:25
 */
<style lang="less" rel="stylesheet/less" type="text/less" >
    .v-home-customer-store-index {
		.thumb{
			display: inline-block;
			width: 60px;
			height: 60px;
			position: relative;
			margin: 5px;
		}
		.thumb > img {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			max-width: 100%;
			max-height: 100%;
			cursor: pointer;
		}
	}
</style>
<template>
	<div class="v-home-customer-store-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="stores"
			class="personal-scrollbar"
			height="350" />

	</div>
</template>

<script>

export default {
	name: 'HomeStoreIndex',
	props: {
		loading: {
			type: Boolean,
			required: true,
		},
		stores: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('home.store_img'),
					key: 'store_img',
					align: 'center',
					render: (h, { row }) => {
						const store_image = row.store_img ? <img src={ row.store_img } width="50" height="50" class="circular-border-img" alt="无"/> : '无';
						return <div class="thumb">{store_image}</div>;
					},
				},
				{
					title: this.$t('home.title'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('home.address'),
					key: 'address',
					align: 'center',
					render: (h, { row }) => <div> { row.address || '-' } </div>,
				},
				{
					title: this.$t('home.access_number'),
					key: 'visit',
					align: 'center',
					render: (h, { row }) => <div> { row.visit || 0 } </div>,
				},
				{
					title: this.$t('home.try_on_count'),
					key: 'try_on',
					align: 'center',
					render: (h, { row }) => <div> { row.try_on || 0 } </div>,
				},
			],
		};
	},
	methods: {


	},
};
</script>
